<template>
  <div class="left_middlemap com_echarts" id="left_middlemap">
  </div>
</template>

<script>
import echarts from 'echarts';
import echartsrender from '../../../assets/js/jquery.echarts';
export default {
  name: 'left_middlemap',
  data () {
    return {
        id:"left_middlemap"
    }
  },
  created () {

  },
  mounted(){
      this.initMap();
  },
  methods:{
    initMap(){
        let that = this;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(this.id));
        var args = {
            legend_data:['政府补助', '个人筹资'],
            xAxis_data:['城镇居民医保', '新农合', '城乡居民医保'],
            series:[{
                name: '政府补助',
                type: 'bar',
                data: [20, 34, 18],
                barWidth: 22, //柱子宽度
                barGap: 1, //柱子之间间距
                itemStyle: {
                    normal: {
                        color: '#0071c8',
                        opacity: 1,
                    }
                }
            }, {
                name: '个人筹资',
                type: 'bar',
                data: [10, 24, 5],
                barWidth: 22,
                barGap: 1,
                itemStyle: {
                    normal: {
                        color: '#fdc508',
                        opacity: 1,
                    }
                }
            }]
        };
        var option = echartsrender.portbar(args);
        myChart.setOption(option);
    },
    randomData() {
        return Math.round(Math.random()*1000);
    }
  }
}
</script>
<style lang='scss'  rel="stylesheet/scss" scoped>
.com_echarts{
    width:100%;
    height:100%;
}
</style>
